<template>
  <!-- 查询条件 -->
  <div>
      角色名称:<el-input v-model="page.RoleName" style="width: 200px"></el-input>&emsp;
      &emsp;&emsp;<el-button :icon="Search" type="primary" @click="GetRouter">搜索</el-button>
      <el-button type="success" :icon="Plus" @click="dialogFormVisible = true">新增角色</el-button>
  </div>
  <!-- 列表显示 -->
  <el-table :header-cell-style="{ height: '100px', fontSize: '15px',color:'black' , backgroundColor: 'antiquewhite' }" :data="tableData" border style="width: 100%">
      <el-table-column prop="roleName" label="角色名称" />
      <el-table-column prop="description" label="角色描述" />
      <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
              <el-button v-if="scope.row.isDeleted == false" :icon="Delete" circle type="danger" size="small" @click=""/>
              <el-button  type="primary" size="small" :icon="Search" circle/>
          </template>
      </el-table-column>
  </el-table>
  <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize" :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  <!-- 对话框新增 -->
  <el-dialog v-model="dialogFormVisible" width="500">
      <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
          class="demo-ruleForm" :size="formSize" status-icon>
          <el-form-item label="名称" prop="roleName">
              <el-input v-model="ruleForm.roleName" placeholder="请输入名称" />
          </el-form-item>
          <el-form-item label="备注" prop="description">
              <el-input v-model="ruleForm.description" />
          </el-form-item>
      </el-form>
      <template #footer>
          <div class="dialog-footer">
              <el-button type="success" :icon="SuccessFilled"  @click="submitForm(ruleFormRef)">
                  保存
              </el-button>
              <el-button type="danger" :icon="Close" @click="dialogFormVisible = false">关闭</el-button>
          </div>
      </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {
Check,
Delete,
Edit,
Message,
Search,
Star,
Plus,
Setting,
SuccessFilled,
Close,
} from '@element-plus/icons-vue'
import { reactive, ref, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
//调用持久化
import { useCounterStore } from '@/stores/counter';
import { fa } from 'element-plus/es/locales.mjs';
const counterStore = useCounterStore();
const route = useRoute();
const router = useRouter();
onMounted(() => {
  GetRouter()
})
const cpiurls = import.meta.env.VITE_APP_API_URL_RBACCommon;//5214
const apiurls = import.meta.env.VITE_APP_API_URL_RBACWrite;//5268

const page = reactive({
  RoleName: '',
  pageIndex: 1,
  pageSize: 5,
  totalPage: 1,
  totalCount: 1,
});

const handleSizeChange = (val: any) => {
  console.log(val)
  page.pageSize = val;
  GetRouter();

};

const handleCurrentChange = (val: any) => {
  page.pageIndex = val;
  GetRouter();
};

const dialogFormVisible = ref(false);
const ruleForm = reactive({
  "roleName": "",
  "description": ""
});

const radio = ref(1);

const formSize = ref<ComponentSize>('default');
const ruleFormRef = ref<FormInstance>();

const rules = reactive<FormRules>({
  name: [{ required: true, message: '必填', trigger: 'blur' }],
  region: [
      {
          required: true,
          message: 'Please select Activity zone',
          trigger: 'change'
      }
  ]
});
//弹框按钮
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
      if (valid) {
          axios.post(apiurls+'/api/RBACs/RolesAdd', ruleForm).then((res) => {
              if (res.data.code == 0) {
                  dialogFormVisible.value = false
                  console.log(res.data.message)
                  GetRouter()
              }
              else {
                  console.log(res.data.message)
              }
          })
      } else {
          console.log('error submit!', fields);
      }
  });
};

const tableData = ref([]);
const GetRouter = () => {
  axios.get(apiurls+'/api/RBACs/RolesList', { 
      params: {
          RoleName: page.RoleName,
          pageIndex: page.pageIndex,
          pageSize: page.pageSize
      }
  }).then((res) => {

      if (res.data.code == 0) {
          tableData.value = res.data.data
          console.log(res.data.messege)
          page.totalPage = res.data.totalPage
          page.totalCount = res.data.totalCount
      }
      else {
          ElMessage.error(res.data.messege)
      }
  })
}





</script>

<style scoped></style>
